<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文件显示进度</title>
</head>

<body>
    <div style="width: 200px;height:200px; background-color:#ff0;" id="drag">

    </div>
    <div style="width:300px;height:20px;background-color:#333">
        <div id="progress" style="width:0; height:20px; background-color:red"></div>
    </div>
    <button id="upload">upload</button>
    <script>
        let fileContent = ""
        drag.addEventListener("dragover", function (e) {
            e.preventDefault();
        })
        drag.addEventListener("drop", function (e) {
            e.preventDefault();
            fileContent = e.dataTransfer.files[0]
        })
        upload.addEventListener("click", () => {
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "upload", true)
            let formData = new FormData();
            formData.append("avatar", fileContent)
            xhr.onload = function () {
                alert("upload ok")
            }
            xhr.upload.onprogress = function (e) {
                console.log(e, "---");
                progress.style.width = e.loaded / e.total * 100 + "%";
            }
            xhr.send(formData)
        })
    </script>
</body>

</html>